<template>
	<view class="bottom">
		<scroll-view class="scroll-view_H" show-scrollbar="false"  scroll-x="true"  scroll-left="0">
		    <view  
				class="scroll-view-item_H " 
				v-for="(item,index) in btnData" 
				@click="bottomBtn(index,item.id)"
				:key='index'>
				<view class="item-img" >
					<image v-if="btnIndex!=index" :src="item.img" mode="aspectFit"></image>
					<image  v-if="btnIndex==index" :src="item.img_in" mode="aspectFit"></image>
				</view>
				<text class="item-text" :class="btnIndex==index?'blue':''">{{item.name}}</text>
			</view>
		</scroll-view>
		<TouristCenter v-if='openTouristCen' />
		<TouristCallSOS v-if='openCallSOS'></TouristCallSOS>
		<TouristCall v-if='openCall' />
	</view>
</template>

<script>
	import TouristCenter from '@/components/TouristCenter.vue'
	import TouristCall from '@/components/TouristCall.vue'
	import TouristCallSOS from '@/components/TouristCallSOS.vue'
	export  default{
		data(){
			return{
				openTouristCen:false,
				openCall:false,
				openCallSOS:false,
				btnIndex:0,
				btnData:[
					{
						name:'景点介绍',
						img:'/static/map/jingdianjieshao.png',
						img_in:'/static/map/jingdianjieshao2.png',
						id:1
					},
					{
						name:'景物介绍',
						img:'/static/map/jingwujieshao.png',
						img_in:'/static/map/jingwujieshao2.png',
						id:10
					},
					{
						name:'路线规划',
						img:'/static/map/luxianguihua.png',
						img_in:'/static/map/luxianguihua2.png',
						id:2
					},
					{
						name:'在线排队',
						img:'/static/map/online.png',
						img_in:'/static/map/online2.png',
						id:11
					},
					{
						name:'语音导览',
						img:'/static/map/yuyindaolan.png',
						img_in:'/static/map/yuyindaolan2.png',
						id:12
					},
					{
						name:'洗手间',
						img:'/static/map/wcjian.png',
						img_in:'/static/map/wcjian2.png',
						id:3
					},
					{
						name:'餐饮',
						img:'/static/map/cooking.png',
						img_in:'/static/map/cooking2.png',
						id:4
					},
					{
						name:'住宿',
						img:'/static/map/zhusuroom.png',
						img_in:'/static/map/zhusuroom2.png',
						id:5
					},
					{
						name:'电商',
						img:'/static/map/shopline.png',
						img_in:'/static/map/shopline2.png',
						id:9
					},
					{
						name:'游客中心',
						img:'/static/map/youkecenter.png',
						img_in:'/static/map/youkecenter2.png',
						id:6
					},
					{
						name:'出口',
						img:'/static/map/safetyexit.png',
						img_in:'/static/map/safetyexit2.png',
						id:7
					},
					{
						name:'停车场',
						img:'/static/map/P.png',
						img_in:'/static/map/P2.png',
						id:8
					},
					
					
				]
			}
		},
		methods: {
			bottomBtn(index,id) {
				//#ifdef APP-PLUS|| MP-WEIXIN
				this.$parent.clearPops();
				//#endif
				//#ifndef APP-PLUS|| MP-WEIXIN
				this.$parent.$parent.clearPops();
				//#endif
				
				if(id!=6){
					this.openTouristCen = false
				}
				if(id!=1){
					//#ifdef APP-PLUS|| MP-WEIXIN
					this.$parent.closeSpotSearch();
					this.$parent.closeDetail();
					//#endif
					//#ifndef APP-PLUS|| MP-WEIXIN
					this.$parent.$parent.closeSpotSearch();
					this.$parent.$parent.closeDetail();
					//#endif
				}
				if(id!=2){
					//#ifdef APP-PLUS|| MP-WEIXIN
					this.$parent.closeLine();
					this.$parent.closeLinePointBox()
					//#endif
					//#ifndef APP-PLUS|| MP-WEIXIN
					this.$parent.$parent.closeLine();
					this.$parent.$parent.closeLinePointBox()
					//#endif
				}
				if(id!=4){
					//#ifdef APP-PLUS|| MP-WEIXIN
					this.$parent.closeSpotSearchF();
					//#endif
					//#ifndef APP-PLUS|| MP-WEIXIN
					this.$parent.$parent.closeSpotSearchF();
					//#endif
				}
				if(id!=5){
					//#ifdef APP-PLUS|| MP-WEIXIN
					this.$parent.closeSpotSearchH();
					//#endif
					//#ifndef APP-PLUS|| MP-WEIXIN
					this.$parent.$parent.closeSpotSearchH();
					//#endif
				}
				if(id!=10){
					//#ifdef APP-PLUS|| MP-WEIXIN
					this.$parent.closeSpotSearchS();
					this.$parent.closeJQDetail();
					this.$parent.bottomIndex = 0;
					//#endif
					//#ifndef APP-PLUS|| MP-WEIXIN
					this.$parent.$parent.closeSpotSearchS();
					this.$parent.$parent.closeJQDetail();
					this.$parent.$parent.bottomIndex = 0;
					//#endif
				}
				if(id!=11){
					//#ifdef APP-PLUS|| MP-WEIXIN
					this.$parent.closeSpotSearchO();
					//#endif
					//#ifndef APP-PLUS|| MP-WEIXIN
					this.$parent.$parent.closeSpotSearchO();
					//#endif
				}
				if(id!=12){
					//#ifdef APP-PLUS|| MP-WEIXIN
					this.$parent.closeSpotSearchA();
					//#endif
					//#ifndef APP-PLUS|| MP-WEIXIN
					this.$parent.$parent.closeSpotSearchA();
					//#endif
				}
				this.btnIndex = index
				switch (id){
					case 12:
						//#ifdef APP-PLUS|| MP-WEIXIN
						this.$parent.openSpotSearchA();
						this.$parent.choosePoint(999);
						// this.$parent.openrealN();
						//#endif
						//#ifndef APP-PLUS|| MP-WEIXIN
						this.$parent.$parent.openSpotSearchA();
						this.$parent.$parent.choosePoint(999);
						// this.$parent.openrealN();
						//#endif
						break;
					case 10:
						//#ifdef APP-PLUS|| MP-WEIXIN
						this.$parent.openSpotSearchS();
						this.$parent.choosePoint(999);
						// this.$parent.openrealN();
						//#endif
						//#ifndef APP-PLUS|| MP-WEIXIN
						this.$parent.$parent.openSpotSearchS();
						this.$parent.$parent.choosePoint(999);
						// this.$parent.openrealN();
						//#endif
						break;
					case 11:
						//#ifdef APP-PLUS|| MP-WEIXIN
						this.$parent.openSpotSearchO();
						this.$parent.choosePoint(999);
						// this.$parent.openrealN();
						//#endif
						//#ifndef APP-PLUS|| MP-WEIXIN
						this.$parent.$parent.openSpotSearchO();
						this.$parent.$parent.choosePoint(999);
						// this.$parent.openrealN();
						//#endif
						break;
					case 1:
						//#ifdef APP-PLUS|| MP-WEIXIN
						this.$parent.openSpotSearch();
						this.$parent.closeDetail();
						this.$parent.choosePoint(999);
						//#endif
						//#ifndef APP-PLUS|| MP-WEIXIN
						this.$parent.$parent.openSpotSearch();
						this.$parent.$parent.closeDetail();
						this.$parent.$parent.choosePoint(999);
						//#endif
						break;
					case 2:
						//#ifdef APP-PLUS|| MP-WEIXIN
						this.$parent.openLine();
						this.$parent.choosePoint(999);
						//#endif
						//#ifndef APP-PLUS|| MP-WEIXIN
						this.$parent.$parent.openLine();
						this.$parent.$parent.choosePoint(999);
						//#endif
						break;
					case 4:
						//#ifdef APP-PLUS|| MP-WEIXIN
						this.$parent.choosePoint(id);
						this.$parent.popType=4;
						this.$parent.openSpotSearchF();
						this.$parent.closeDetail();
						// this.$parent.choosePoint(999);
						//#endif
						//#ifndef APP-PLUS|| MP-WEIXIN
						this.$parent.$parent.choosePoint(id);
						this.$parent.$parent.popType=4;
						this.$parent.$parent.openSpotSearchF();
						this.$parent.$parent.closeDetail();
						// this.$parent.$parent.choosePoint(999);
						//#endif
						break;
					case 5:
						//#ifdef APP-PLUS|| MP-WEIXIN
						this.$parent.choosePoint(id);
						this.$parent.popType=5;
						this.$parent.openSpotSearchH();
						this.$parent.closeDetail();
						// this.$parent.choosePoint(999);
						//#endif
						//#ifndef APP-PLUS|| MP-WEIXIN
						this.$parent.$parent.choosePoint(id);
						this.$parent.$parent.openSpotSearchH();
						this.$parent.$parent.popType=5;
						this.$parent.$parent.closeDetail();
						// this.$parent.$parent.choosePoint(999);
						//#endif
						break;
					case 6:
						this.openTouristCen = !this.openTouristCen
						//#ifdef APP-PLUS|| MP-WEIXIN
						this.$parent.choosePoint(id);
						// this.$parent.choosePoint(999);
						//#endif
						//#ifndef APP-PLUS|| MP-WEIXIN
						this.$parent.$parent.choosePoint(id);
						// this.$parent.$parent.choosePoint(999);
						//#endif
						break;
					default:
						//#ifdef APP-PLUS|| MP-WEIXIN
						this.$parent.choosePoint(id);
						//#endif
						//#ifndef APP-PLUS|| MP-WEIXIN
						this.$parent.$parent.choosePoint(id);
						//#endif
						break;
				}
			},
			closeTourist(){
				this.openTouristCen = false;
			},
			toCall(type){
				if(type=='open'){
					this.openTouristCen = false
					this.openCall = !this.openCall
				}else if(type=='close'){
					this.openCall = !this.openCall
				}
				
			},
			toCallSOS(type){
				if(type=='open'){
					this.openTouristCen = false
					this.openCallSOS = !this.openCallSOS
				}else if(type=='close'){
					this.openCallSOS = !this.openCallSOS
				}
				
			},
			
		},
		components: {
			TouristCenter,
			TouristCall,
			TouristCallSOS
		},
	}
</script>

<style scoped>
	.bottom{
		width: 750upx;
		height: 110upx;
		position: fixed;
		bottom: 0;
		background: #FFFFFF;
		z-index: 31;
	},
	.scroll-view_H{
		width: 750upx;
		padding-top: 16upx;
		height: 90upx;
		white-space: nowrap;
	}
	
	.scroll-view-item_H{
		display: inline-block;
		width: 135upx;
		height: 90upx;
		
	}
	.item-img image{
		width: 40upx;
		height: 40upx;
		margin-left: 45upx;
		margin-right: 45upx;
	}
	.item-text{
		width: 130upx;
		display: block;
		text-align: center;
		margin-bottom: ;
		font-size: 24upx;
	}
	.blue{
		color: #4CA4FF;
	}
</style>
